<template>
  <div class="user-center-container">
    <el-row :gutter="20">
      <!-- 左侧导航 -->
      <el-col :span="6">
        <el-card class="user-menu">
          <el-menu
            :default-active="activeMenu"
            router
          >
            <el-menu-item index="/user/downloads">
              <el-icon><Download /></el-icon>
              <span>我的下载</span>
            </el-menu-item>
            <el-menu-item index="/user/coins">
              <el-icon><Coin /></el-icon>
              <span>我的虚拟币</span>
            </el-menu-item>
            <el-menu-item index="/user/profile">
              <el-icon><User /></el-icon>
              <span>个人资料</span>
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-col>
      
      <!-- 右侧内容 -->
      <el-col :span="18">
        <router-view />
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { Download, Coin, User } from '@element-plus/icons-vue'

const route = useRoute()
const activeMenu = computed(() => route.path)
</script>

<style scoped>
.user-center-container {
  padding: 20px;
}

.user-menu {
  margin-bottom: 20px;
}
</style>